<template>
  <div class='works-barrage' id="full-screen" @mousemove="showFullScreen" @mouseout="hideFullScreen">
    <Barrage v-if="showBarrage" :long="long"></Barrage>
    
    <!-- 全屏按钮 -->
    <FullScreen :hiddenFull="hiddenFull" :isFullScreen="isFullScreen" :fullScreen="fullScreen" ></FullScreen>
  </div>
</template>
<script>
import Barrage from '../../../components/barrage'
import FullScreen from '../../../components/fullScreen'
export default {
  components: {Barrage,FullScreen},
  name: "",
  data() {
    return {
      isFullScreen: false,//是否在全屏显示
      settime: null, //显示全面的定时
      hiddenFull: false,// 隐藏
      long:null,
      showBarrage:true,
    };
  },
  methods: {
    fullScreen() {
      _g.fullScreen("full-screen",this);
    },
    showFullScreen(e) {
      var mouseY=e.clientY-document.querySelector(".work-menu").clientHeight-10 -document.querySelector("#full-screen").clientHeight
      // console.log(mouseY)
      var heightModel=this.isFullScreen?"-220":"-40"
      if(mouseY>heightModel){
        this.hiddenFull = true;
      }else{
        this.hiddenFull = false;
      }

      $("#full-screen").css({
        cursor: "auto"
      });
      if (this.settime) clearTimeout(this.settime);
      this.settime = setTimeout(() => {
        $("#full-screen").css({
          cursor: "none"
        });
      }, 2000);
    },
    hideFullScreen(){
      this.hiddenFull = false;
    }
  },
  created() {
    var that=this
    window.onresize=function(){
      this.long=20
      this.showBarrage=false
      setTimeout(()=>{
        this.showBarrage=true
      },5)
      var show = document.querySelector("#full-screen").clientHeight==document.querySelector('html').clientHeight
      console.log(show)
      that.$set(that,"isFullScreen",show)
      
    }
  },
  beforeDestroy(){
    // window.onresize=null
  }
};
</script>
<style lang="scss" scoped>
.works-barrage {
  height: 100%;
  flex-grow: 1;
  position: relative;
  overflow: hidden;
}
</style>